<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .a {
            background-color: rgba(2, 2, 2, .4);
            transition: .3s;
            color: #fff;

            height: 0;
        }
    </style>
</head>

<body>

    <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
        查看更多
    </button>
    <!-- 折叠的部分  默认不显示   如果需要显示 就加 in -->
    <div id="demo" class="collapse">
        详情
    </div>


    <!-- 
        折叠菜单   
            点击的元素  data-toggle="collapse" data-target="#id名"
            显示的元素  class="collapse"   默认如果需要显示就加 in
         -->

    <p data-toggle="collapse" data-target="#a">more</p>
    <div id="a" class="collapse">的顶顶顶顶顶的顶顶顶顶顶多多多多</div>


    <br>

</body>

</html>